<template>
  <div class="content">
    <el-row :gutter="20">
      <!-- 固定题库 -->
      <el-col :span="12">
        <el-card class="card-container">
          <template #header>
            <div class="card-header">
              <span class="title">📚 固定题库抽取</span>
            </div>
          </template>

          <el-form :model="fixedForm" label-width="80px" class="question-form">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="单选题">
                  <el-input v-model.number="fixedSingleChoiceCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="判断题">
                  <el-input v-model.number="fixedTrueFalseCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="简答题">
                  <el-input v-model.number="fixedShortAnswerCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="form-button">
              <el-button type="danger" @click="clearFixedQuestions" size="small" icon="el-icon-delete">清空题库</el-button>
              <el-button type="primary" @click="generateFixedQuestions" size="small" icon="el-icon-search">开始抽取</el-button>
            </el-form-item>
            
          </el-form>

          <el-table 
            v-loading="fixedLoading" 
            :data="fixedQuestions" 
            border 
            class="question-table"
            height="350">
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="question" label="题目" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="options" label="选项" align="left" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="row.options">{{ row.options.join(' | ') }}</span>
                <span v-else>无选项</span>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            class="pagination"
            layout="prev, pager, next"
            :total="fixedTotal"
            :page-size="pageSize"
            :current-page="fixedPage"
            @current-change="handleFixedPageChange"
          />
        </el-card>
      </el-col>

      <!-- 大模型题库 -->
      <el-col :span="12">
        <el-card class="card-container">
          <template #header>
            <div class="card-header">
              <span class="title">🤖 大模型生成</span>
            </div>
          </template>

          <el-form :model="aiForm" label-width="80px" class="question-form">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="单选题">
                  <el-input v-model.number="aiSingleChoiceCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="判断题">
                  <el-input v-model.number="aiTrueFalseCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="简答题">
                  <el-input v-model.number="aiShortAnswerCount" placeholder="输入数量" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="提示词" class="prompt-input">
              <el-input v-model="aiPrompt" placeholder="输入提示词" size="small"></el-input>
            </el-form-item>
            <el-form-item class="form-button">
              <el-button type="danger" @click="clearAiQuestions" size="small" icon="el-icon-delete">清空题库</el-button>
              <el-button type="primary" @click="generateAiQuestions" size="small" icon="el-icon-magic-stick">生成题目</el-button>
            </el-form-item>
          </el-form>

          <el-table 
            v-loading="aiLoading" 
            :data="aiQuestions" 
            border 
            class="question-table"
            height="350">
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="question" label="题目" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="options" label="选项" align="left" show-overflow-tooltip>
              <template #default="{ row }">
                <span v-if="row.options">{{ row.options.join(' | ') }}</span>
                <span v-else>无选项</span>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
              class="pagination"
              layout="prev, pager, next"
              :total="aiTotal"
              :page-size="pageSize"
              :current-page="aiPage"
              @current-change="handleAiPageChange"
            />
        </el-card>
      </el-col>
    </el-row>
    
    <div class="action-buttons">
      <!-- <el-button type="success" size="small" icon="el-icon-upload2" >上传题目</el-button> -->
      <base-button type="success" size="small"  @click="next">下一步</base-button>
    </div>
  </div>
</template>

<script>
import { fetchFixedQuestions, fetchLlmQuestions,generateFixedQuestions,generateLlmQuestions,mergeQuestions } from "../api/QuestionBank.js";
import request from "../request.js";
import router from '@/router'; // 引入路由实例
import { Message } from "element-ui";
export default {
  data() {
    return {
      // 固定题库
      fixedSingleChoiceCount: 0,
      fixedTrueFalseCount: 0,
      fixedShortAnswerCount: 0,
      fixedQuestions: [],
      fixedLoading: false,
      fixedTotal: 0,
      fixedPage: 1,
      fixedForm: {}, // 为了满足el-form的:model属性

      // 大模型题库
      aiSingleChoiceCount: 0,
      aiTrueFalseCount: 0,
      aiShortAnswerCount: 0,
      aiQuestions: [],
      aiLoading: false,
      aiTotal: 0,
      aiPage: 1,
      aiPrompt: '',
      aiForm: {}, // 为了满足el-form的:model属性

      pageSize: 5,
    };
  },
  mounted() {
    this.loadFixedQuestions();
    this.loadAiQuestions();
  },
  computed: {
    
  },
  methods: {
    //清空固定题库
    async clearFixedQuestions(){
      try{
        await request.delete('/generation/fixed');
        this.loadFixedQuestions();
        Message.success('清空固定题库成功');
      }catch(error){
        console.error('清空固定题库失败',error);
      }
    },
    //清空大模型题库
    async clearAiQuestions(){
      try{
        await request.delete('/generation/llm');
        this.loadAiQuestions();
        Message.success('清空大模型题库成功');
      }catch(error){
        console.error('清空大模型题库失败',error);
      }
    },
    // 固定题库分页切换
      handleFixedPageChange(newPage) {
        this.fixedPage = newPage;
        this.loadFixedQuestions();
      },

      // 大模型题库分页切换
      handleAiPageChange(newPage) {
        this.aiPage = newPage;
        this.loadAiQuestions();
      },
    async next(){
      const response = await mergeQuestions();
      if(response.code === 0){
        router.push('/table');
      }
    },
    // **分页查询固定题库**
    async loadFixedQuestions() {
      this.fixedLoading = true;
      try {
        const response = await fetchFixedQuestions({
          page:this.fixedPage, 
          size:this.pageSize
        });

        if (response && response.data && Array.isArray(response.data.items)) {
          this.fixedQuestions = response.data.items.map((item) => ({
            ...item,
            options: item.options ? JSON.parse(item.options) : null,
          }));
          this.fixedTotal = response.data.total || 0;
        } else {
          this.fixedQuestions = [];
          this.fixedTotal = 0;
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.fixedLoading = false;
      }
    },

     // **分页查询大模型题库**
     async loadAiQuestions() {
      this.aiLoading = true;
      try {
        const response = await fetchLlmQuestions({
          page: this.aiPage,
          size: this.pageSize,
        });
        if (response && response.data && Array.isArray(response.data.items)) {
          this.aiQuestions = response.data.items.map((item) => ({
            ...item,
            options: item.options ? JSON.parse(item.options) : null,
        }));
        this.aiTotal =  response.data.total || 0;
        }else {
          this.aiQuestions = [];
          this.aiTotal = 0;
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.aiLoading = false;
      }
    },

   // **生成固定题库后刷新分页查询**
   async generateFixedQuestions() {
      try {
        await generateFixedQuestions({
          choiceCount: this.fixedSingleChoiceCount,
          trueFalseCount: this.fixedTrueFalseCount,
          shortAnswerCount: this.fixedShortAnswerCount,
        });
        Message.success("固定题库生成成功！");
        this.loadFixedQuestions(); // 生成完毕后刷新分页数据
      } catch (error) {
        console.error(error);
        Message.error("固定题库生成失败！");
      }
    },

    // **生成大模型题库后刷新分页查询**
    async generateAiQuestions() {
      try {
        this.aiLoading = true;
        const response = await generateLlmQuestions({
          choiceCount: this.aiSingleChoiceCount,
          trueFalseCount: this.aiTrueFalseCount,
          shortAnswerCount: this.aiShortAnswerCount,
          prompt: this.aiPrompt,
        });
        
        Message.success("大模型题库生成成功！");
        this.loadAiQuestions(); // 生成完毕后刷新分页数据
      } catch (error) {
        console.error(error);
        Message.error("大模型题库生成失败！");
      }
    },
    
   
  },
};
</script>

<style scoped>


.card-container {
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.card-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.question-form {
  padding: 10px 20px;
}

.form-button {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.prompt-input {
  margin-top: 10px;
}

.question-table {
  margin: 0 10px;
  border-radius: 4px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: auto;
  padding: 20px 0;
}

.el-button {
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.3s;
}

.el-button--primary {
  background-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
}

.el-button--success {
  background-color: #67C23A;
}

.el-button--success:hover {
  background-color: #85ce61;
}

/* 确保两个卡片高度一致 */
.el-row {
  display: flex;
  margin-bottom: 20px;
}

.el-col {
  display: flex;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }
  
  .el-col {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
}
</style>